import React from "react";
import Chart from "echarts-for-react";
import style from "./Echarts_tu.less";


class Echarts_tu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            xianzhi:0
        }



    }

    componentDidMount() {
        console.log(Chart)

    }

    componentWillMount () {
        console.log(this.props.xianzhi)
        this.setState({
            xianzhi:this.props.xianzhi
        })
    }



    setOption = () => {
        let xianzhi = this.props.xianzhi
        let data = this.props.data
        return {

            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {

                    var res = params[0].name;

                    for (var i = 0, l = params.length; i < l; i++) {
                        if (params[i].seriesType === 'line') {
                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-');
                        } else {
                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-');
                        }
                    }
                    return res;

                }
            },

            grid: {
                left: '2%',
                right: '6%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',

                axisTick: {
                    alignWithLabel: true
                },
                data:data.xAxis
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }
                , {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }, {
                type: 'inside',
                yAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    },
                    position: 'left',
                    name: data.unit,
           
                    max: function(value) {
                        return value.max > Number(xianzhi) ?parseInt( (value.max) *1.5):parseInt(Number(xianzhi)*1.2)
                    }
                }

            ],

            series: [
                {
                    name: "实时值",
                    type: 'line',
                    stack: '总量',
                    yAxisIndex: 0,
                    data: data.yAxis,
                    markLine : {
                        data : [
                            {yAxis :data.standardValue, name : '标准值'}
                        ],
                        lineStyle:{color:'#2BDDC2',type:'dashed'}
                    },
                }

            ]
        }



    }

    render() {
        console.log(this.props)
        return (

            <Chart option={this.setOption()} notMerge lazyUpdate className={style.main}
                style={{ height: 400 }}
            />




        );
    }

}

export default Echarts_tu;
